<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <title>农资商贸销售系统</title>
</head>
<body>
<!-- 顶部tab -->
<div th:replace="~{mall/common :: header}"></div>

<!-- 顶部标题 -->
<div class="bgf5 clearfix">
    <div class="top-user">
        <div class="inner">
            <a style="left: -22px;top: 15px;width: 246px;height: 188px;" class="logo" href="index"><img src="images/icons/logo.png" alt="农资商贸销售系统" class="cover"></a>
            <div class="title">个人中心</div>
        </div>
    </div>
</div>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <a href="index"><span class="title">农资商城销售系统</span></a>
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="userSetting">
                    <dd class="active">个人资料</dd>
                </a>
                <a href="userAddress">
                    <dd>收货地址</dd>
                </a>
                <a href="userUpdatePwd">
                    <dd>修改登录密码</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="userOrder">
                    <dd>我的订单</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">账户信息-个人资料</div>
                <form class="user-setting__form" role="form">
					<div class="user-form-group" style="display: none">
						<label for="id">id：</label>
						<input type="hidden" id="id" th:value="${userinfo.id}" disabled>
					</div>
					<div class="user-form-group">
						<label for="phone">账号：</label>
						<input type="text" id="phone" th:value="${userinfo.phone}" disabled>
					</div>
                    <div class="user-form-group">
                        <label for="username">用户名：</label>
                        <input type="text" id="username" th:value="${userinfo.username}" placeholder="请输入您的昵称">
                    </div>

                    <div class="user-form-group">
                        <label for="birthday">生日：</label>
                        <label><input type="text" id="birthday" class="datepicker" th:value="${birthday}"
                                      placeholder="请选择您的出生日期"></label>
                    </div>
                    <div class="user-form-group">
                        <button type="button" class="btn" id="submitUserInfo">确认修改</button>
                    </div>
                </form>
                <script src="js/zebra.datepicker.min.js"></script>
                <link rel="stylesheet" href="css/zebra.datepicker.css">
                <script>
                    $('input.datepicker').Zebra_DatePicker({
                        default_position: 'below',
                        show_clear_date: false,
                        show_select_today: false,
                    });

					$('#submitUserInfo').click(function () {
                        let username = $('#username').val();
                        let birthday = $('#birthday').val();
                        if (!username ||!birthday) {
							DJMask.open({
								width: "300px",
								height: "100px",
								content: "请填写完整信息！！！"
							})
                            return false;
                        }
                        $.ajax({
                            type: 'post',
                            url: '/mall/userinfo/update',
                            data: {
                                'username': username,
                                'birthday': birthday,
                                'id': $('#id').val()
                            },
                            success: function (res) {
								if (res.code === 200) {
									DJMask.open({
										width: "300px",
										height: "100px",
										content: "修改成功！！！"
									})
								} else  if (res.code === 401){
									DJMask.open({
										width: "300px",
										height: "100px",
										content: res.msg+"，将在三秒后自动跳转到登录页面"
									})
									//倒计时三秒跳转到登录页面
									setTimeout(function () {
										window.location.href="/mall/login";
									}, 3000);
								}else{
									DJMask.open({
										width: "300px",
										height: "100px",
										content: res.msg
									})
								}
                            }
                        })
                    })
                </script>
            </div>
        </div>
    </section>
</div>

<!-- 右侧菜单 -->
<div th:replace="~{mall/common :: rightNav}"></div>
<!-- 底部信息 -->
<div th:replace="~{mall/common :: footer}"></div>
<link href="css/cropper/cropper.min.css" rel="stylesheet">
<link href="css/cropper/sitelogo.css" rel="stylesheet">
<script src="js/cropper/cropper.min.js"></script>
<script src="js/cropper/sitelogo.js"></script>


</body>
</html>